<template>
  <div class="design-wrapper">
    <div>
      观察者模式，当点击按钮触发事件，本质就是观察者模式。 点击按钮 打印 “hello”
      <div class="btn">
        <Button type="primary"
                @click="showHello">点击打印 “hello”</Button>
        <h3 v-if="flag">{{msg}}</h3>
      </div>
    </div>
    <div>工厂模式，script 标签里面代码</div>
    <div>单例模式，script 标签里面代码</div>
  </div>
</template>
<script>
// 单例模式
let SingleTest = (function () {
  let _instance = null;
  return function () {
    if (_instance == null) {
      _instance = this
    }
    return _instance;
  }
})();

let i1 = new SingleTest();
let i2 = new SingleTest();
console.log(i1 === i2) // true

// 工厂模式
function SmallCar () {
  this.name = 'BMW';
  this.color = 'red';
}
function CarFactory () {
  let newCar = null;
  newCar = new SmallCar();
  return newCar;
}
CarFactory(); // SmallCar {name: "BMW", color: "red"}


</script>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      flag: false
    }
  },
  methods: {
    showHello () {
      this.flag = true;
    }
  }
}
</script>
